<template>
  <div class="declare-query-form">
    <el-form :model="queryForm" ref="queryForm" :inline="true">
      <el-form-item prop="title">
        <el-input
          v-model="queryForm.title"
          placeholder="申报标题"
          clearable
          @input="handleQuery"
        />
      </el-form-item>

      <el-form-item prop="startTime">
        <el-date-picker
          v-model="queryForm.startTime"
          prefix-icon="el-icon-date"
          type="date"
          placeholder="申报开始时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @input="handleQuery"
        ></el-date-picker>
      </el-form-item>

      <el-form-item prop="endTime">
        <el-date-picker
          prefix-icon="el-icon-date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          v-model="queryForm.endTime"
          type="date"
          placeholder="申报截止时间"
          align="right"
          @input="handleQuery"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="status">
        <el-select
          v-model="queryForm.status"
          clearable
          placeholder="状态"
          @input="handleQuery"
        >
          <el-option
            v-for="dict in childrenOptions[0]"
            :key="dict.value"
            :label="dict.desc"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="warning" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'DeclareQueryForm',
    // 状态下拉列表
    props: { childrenOptions: Array },
    data() {
      return {
        // 查询参数
        queryForm: {
          title: undefined,
          status: undefined,
          statusOptions: [],
          // 时间
          startTime: '',
          endTime: '',
        },
      }
    },
    methods: {
      // * 查询按钮
      handleQuery() {
        this.$emit('query', this.queryForm)
      },
      // * 重置按钮
      handleReset() {
        this.startTime = ''
        this.endTime = ''
        this.$refs['queryForm'].resetFields()
        this.handleQuery()
      },
    },
  }
</script>

<style scoped></style>
